<template>
  <!-- <LoadingPanel :is-loading="loading">
    <template #default> -->
  <div class="login-container" v-loading="loading">
    <div class="bg"></div>
    <Login
      v-if="curMode === 'login'"
      @change-cur-model="changeCurModel"
    ></Login>
    <Register
      v-if="curMode === 'register'"
      @change-cur-model="changeCurModel"
    ></Register>
    <FindPwd
      v-if="curMode === 'findPwd'"
      @change-cur-model="changeCurModel"
    ></FindPwd>
  </div>
  <!-- </template>
  </LoadingPanel> -->
</template>

<script setup lang="ts">
import { userBg } from '@/hooks/useBg'
// import LoadingPanel from '@/components/LoadingPanel/index.vue'
const { curBgUrl, loading } = userBg() // 使用动态背景url
import Login from './components/Login.vue'
import Register from './components/Register.vue'
import FindPwd from './components/FindPwd.vue'

// 登录注册页面切换
const curMode = ref<'login' | 'register' | 'findPwd'>('login')
const changeCurModel = (value: 'login' | 'register' | 'findPwd') => {
  curMode.value = value
}
</script>

<style scoped lang="scss">
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
    background-image: v-bind(curBgUrl);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
  }
}
</style>
